<script setup lang="ts">
import { reactive, ref } from 'vue';
// 导入库
import {ElMessage, FormInstance } from 'element-plus';
import { InternalRuleItem, Value } from "async-validator";
import * as userservice from '@/assets/api/userservice_0_0_1';
// 引入 vue router
import { useRouter } from "vue-router";
// 构建 router 对象
const router = useRouter()

// 表格引用对象
const formRef = ref<FormInstance>();

// 定义获取 form 变量的 model 
const formModel = reactive<{
  account: string // 账户
  password: string // 密码
  repassword: string  // 重复密码
  rememberPassword: boolean // 是否记住密码
}>({
  account: "",
  password: "",
  repassword: "",
  rememberPassword: false
});

// 提交表单
const onSubmit = async ()=>{
  // 对输入参数进行验证
  const validate = await formRef.value.validate();
  if (!validate) {
    return;
  }
  // 输入表单的值
  const res = await userservice.AddUser({
    username: formModel.account,
    password:formModel.password,
    remember:true,
  });
  // if (res.err_code !== 0) {
  //   ElMessage.error(res.err_msg);
  //   return;
  // }
  console.log(formModel)
  router.push("/login")
};


const Register = () => {
  router.push("/register");
};


const Login = () => {
  router.push("/login");
};

// 校验密码长度
// 自定义表单规则器的写入都是固定的
//  value 值就是输入框对应的值，都是为字符串
const passwordLengthValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) =>{
  if(value.length >= 6) {
    // 负责规则，直接调用 callback
    callback();
  } else {
    // 不符合规则，通过 new Error 返回错误
    callback(new Error("密码长度不能小于 6"));
  }
};
// 验证两次密码是否一致
const rePassValidator = (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void) => {
  if (value === formModel.repassword) {
    callback();
  } else {
    callback(new Error("两次输入密码不同"));
  }
};
</script>
<template>
  <!-- ref 获取 form 的对象 -->
  <!-- :model 设置到 el-form -->
  <div class="new-page">
  <div class="login-panel">
    <div class="login-title">用户注册</div>
  <div class="form-wrapper">
    <el-form ref="formRef" :model="formModel">
      <!-- form 表单的成员 -->
      <!-- label 标签名 prop 要和 formModel 中的变量一致， rules 校验规则 -->
      <el-form-item prop="account" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
        <el-input v-model="formModel.account" placeholder="请输入用户名/手机号" />
      </el-form-item>
      
      <!-- 在 rules 中使用自定义的验证器 -->
      <el-form-item prop="password" :rules="[
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { required: true, validator: passwordLengthValidator, trigger: 'blur' }
      ]">
        <!-- type 设置为密码类型 -->
        <el-input type="password" v-model="formModel.password" placeholder="请输入密码" />
      </el-form-item>

      <el-form-item prop="password" :rules="[
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { required: true, validator: rePassValidator, message: '确认密码且与密码相同', trigger: 'blur' },
        { required: true, validator: passwordLengthValidator, trigger: 'blur' }
      ]">
        <!-- type 设置为密码类型 -->
        <el-input type="password" v-model="formModel.password" placeholder="请再次输入密码" />
      </el-form-item>
      <!-- 设置为水平方向的弹性布局 -->
      <el-form-item class="horzontal-layout">
        <!-- span 元素占满当前空间 -->
        <span class="flex-1" />
        <!-- 元素被挤到最右边 -->
        <el-button type="primary" class="btn" @click="onSubmit" ize="large">注册</el-button>
        <el-link type="warning" class="color" @click="Login">已有账号？去登录</el-link>
      </el-form-item>
    </el-form>
  </div>
  </div>
  </div>
  <router-view />
</template>
<style lang="scss" scoped>
.new-page {
    // 设置为绝对定位
    position: absolute;
    // 距离 左边距、右边距、上边距、下边距 都为 0，目标是要让当前页面铺满窗口
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // 设置背景图片
    background-image: url('@/assets/img/183e185516454bd93b46ae1c929f87fc--1952616321.png');
    // 然后图片铺满窗口
    background-size: cover;
    background-position: center;
    // 背景图片不随页面滚动而滚动
    background-attachment: fixed;
    .login-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        padding: 25px;
        width: 26%;
        min-width: 460px;
        height: 30%;
        min-height: 300px;
        background: rgba(100, 94, 110, 0.6);
        border-radius: 5%;
        box-shadow: 2px 2px 10px #ddd;

        .login-title {
            font-size: 22px;
            text-align: center;
            margin-bottom: 22px;
            color: white;
        }
    }
    .btn {
  transform: translate(-65px);
  width: 80px;
  height: 40px;
  font-size: 15px;
}
.color{
      color: yellow;
      font-size: 12px;
  }
  }
</style>